<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
	.card {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
		width: 100%; /* 修改为100%以铺满屏幕 */
		padding: 10px; /* 减少内边距 */
		border: 1px solid #ccc;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		gap: 8px; /* 调整间距 */
	}

	.item {
		width: 100%;
		display: flex;
		text-align: center;
	}

	/* 统一输入框和按钮的宽度 */
	input[type="number"],
	button {
		width: 100%;
		padding: 12px; /* 增大内边距 */
		font-size: 16px; /* 增大字体大小 */
		border: 1px solid #ccc;
		border-radius: 5px;
		text-align: center;
	}

	/* 美化按钮 */
	button {
		background-color: #007bff;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	/* 按钮悬停效果 */
	button:hover {
		background-color: #0056b3;
	}

	/* 为关机按钮设置红色背景 */
	button.shutdown {
		background-color: #dc3545;
	}

	/* 关机按钮悬停效果 */
	button.shutdown:hover {
		background-color: #a71d2a;
	}

	/* 删除旧样式 */
</style>

<div class="card">
	<!-- 定时关机功能 -->
	<div class="item">
		<input type="number" id="shutdownMinutes" placeholder="输入分钟数" min="1" value="1" />
		<button class="shutdown" onclick="scheduleShutdown()">定时关机（分）</button>
	</div>
	<!-- 定时重启功能 -->
	<div class="item">
		<input type="number" id="restartMinutes" placeholder="输入分钟数" min="1" value="1" />
		<button class="restart" onclick="scheduleRestart()">定时重启（分）</button>
	</div>

	<!-- 原有关机和重启按钮 -->
	<button class="item shutdown" onclick="shutdownServer()">立刻关机</button>
	<button class="item restart" onclick="restartServer()">立刻重启</button>
</div>
<script>
	// 定义 shutdownServer 函数（如果尚未定义）
	function shutdownServer() {
		if (confirm('确定要立刻关机吗？')) {
			fetch('/shutdown', { method: 'POST' })
				.then(response => {
					if (response.ok) {
						alert('系统即将关机');
					} else {
						alert('关机请求失败');
					}
				})
				.catch(error => console.error('Error:', error));
		}
	}

	// 新增 restartServer 函数
	function restartServer() {
		if (confirm('确定要立刻重启吗？')) {
			fetch('/restart', { method: 'POST' })
				.then(response => {
					if (response.ok) {
						alert('系统即将重启');
					} else {
						alert('重启请求失败');
					}
				})
				.catch(error => console.error('Error:', error));
		}
	}

	// 定时关机函数（如果尚未定义）
	function scheduleShutdown() {
		const minutes = document.getElementById('shutdownMinutes').value;
		if (confirm(`确定要在 ${minutes} 分钟后关机吗？`)) {
			fetch('/shutdown-timer', {
				method: 'POST',
				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
				body: `minutes=${minutes}`
			})
				.then(response => {
					if (response.ok) {
						alert(`系统将在 ${minutes} 分钟后关机`);
					} else {
						alert('定时关机请求失败');
					}
				})
				.catch(error => console.error('Error:', error));
		}
	}
	// 新增定时重启函数
	function scheduleRestart() {
		const minutes = document.getElementById('restartMinutes').value;
		if (confirm(`确定要在 ${minutes} 分钟后重启吗？`)) {
			fetch('/restart-timer', {
				method: 'POST',
				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
				body: `minutes=${minutes}`
			})
				.then(response => {
					if (response.ok) {
						alert(`系统将在 ${minutes} 分钟后重启`);
					} else {
						alert('定时重启请求失败');
					}
				})
				.catch(error => console.error('Error:', error));
		}
	}
</script>